<template>
	<view class="content">
		<view class="bg" :style="{ 'background-image': 'url(' + foo.cover + ')' }"></view>
		<view class="navbar" @tap="back">
			<u-icon name="arrow-left" :size="20"></u-icon>
		</view>
		<view class="container">
			<image :src="foo.cover" alt="" />
			<text class="title">{{ foo.name }}</text>
			<view class="tags">
				<text class="tags_box" v-for="(item, index) in foo.tags" :key="index">
					{{ item }}
				</text>
			</view>
			<text class="desc">{{ foo.desc }}</text>
		</view>
		<view class="save-cover">
			<view class="custom-style" @tap="sevaImage">保存封面</view>
			<!-- <u-button text="保存封面" class="custom-style"></u-button> -->
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			foo: []
		};
	},
	onLoad() {
		const eventChannel = this.getOpenerEventChannel();
		eventChannel.on('sendData', (data) => {
			this.foo = data.list;
		});
	},
	methods: {
		sevaImage() {
			uni.saveImageToPhotosAlbum({
				filePath: this.foo.cover,
				success: function () {
					console.log('save success');
				}
			});
		},
		back() {
			const pages = getCurrentPages();
			if (pages.length > 1) {
				const curRoute = pages[pages.length - 2];
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
};
</script>

<style lang="less" scoped>
.navbar {
	padding: 30rpx;
	height: 80rpx;
}
.content {
	// background-color: red;
	position: relative;
	min-height: 100vh;
	// height: 100vh;
}
.container {
	display: flex;
	// flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	flex: 1; // 自动填充剩余高度
	overflow-y: auto; // 内容溢出时滚动
	padding-bottom: 160rpx; // 给底部按钮留出空间

	image {
		width: 320rpx;
		height: 320rpx;
		border-radius: 10rpx;
	}

	.title {
		font-size: 30rpx;
		font-weight: bold;
		margin: 30rpx 0rpx;
		color: #fff;
	}
	.tags {
		margin: 0rpx 0 30rpx 0rpx;
	}
	.tags_box {
		margin-right: 15rpx;
		padding: 5rpx 10px;
		border-radius: 10rpx;
		background-color: #efefef;
		font-size: 25rpx;
		color: #fff;
		background-color: rgba(239, 239, 239, 0.2);
	}

	.desc {
		padding: 0 40rpx;
		font-size: 25rpx;
		color: #fff;
	}
}
.save-cover {
	height: 120rpx;
	position: fixed;
	bottom: 1rpx;
	left: 0;
	right: 0;
	// background-color: #444444;
	.custom-style {
		margin: 0 auto; /* 水平居中 */
		padding: 15rpx 0rpx;
		font-size: 30rpx;
		color: #fff;
		text-align: center;
		width: 300rpx;
		border-radius: 50rpx;
		background-color: rgba(239, 239, 239, 0.5);
		// width: 100rpx;
	}
}

.bg {
	z-index: -1;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	background-size: 1000000px;
}
</style>
